<template>
  <div class="agreement-container tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class="tn-custom-nav-bar__back" @click="goBack">
        <text class="icon tn-icon-left"></text>
      </view>
    </tn-nav-bar>

    <header class="agreement-header">
      <h1>软件许可及服务协议</h1>
      <div class="logo-section">
        <img 
          src="https://ts1.tc.mm.bing.net/th/id/R-C.a1bc3feb63298bcb2f5a51aa754cf6f0?rik=oKAySL64KBJVsw&riu=http%3a%2f%2fwww.xuexili.com%2fuploads%2fallimg%2f2304%2f151632B45-2.jpg&ehk=DYYBJ2XVYGgIg1UfCBtuljQynx4IOr4uWkQfdI9hgPk%3d&risl=&pid=ImgRaw&r=0" 
          alt="吉林农业科技学院校徽" 
          class="logo"
        >
        <p>吉林农业科技学院校友会</p>
        <h2>校友平台软件许可及服务协议</h2>
      </div>
    </header>

    <!-- 缩小后的所有核心章节 -->
    <section class="agreement-chapter agreement-chapter--small">
      <h3>【首部及导言】</h3>
      <p>欢迎您使用校友平台软件及服务！</p>
      <p>为使用校友平台软件（以下简称“本软件”）及服务，您应当阅读并遵守《校友平台软件许可及服务协议》（以下简称“本协议”）。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。</p>
      <p>除非您已阅读并接受本协议所有条款，否则您无权下载、安装或使用本软件及相关服务。您的下载、安装、使用、获取校友平台帐号、登录等行为即视为您已阅读并同意上述协议的约束。</p>
    </section>

    <section class="agreement-chapter agreement-chapter--small">
      <h3>一、【协议的范围】</h3>
      <h4>1.1【协议适用主体范围】</h4>
      <p>本协议是您与校友平台之间关于您使用、复制本软件，以及使用校友平台相关服务所订立的协议。</p>
      <h4>1.2【协议关系及冲突条款】</h4>
      <p>本协议内容同时包括校友平台可能不断发布的关于本服务的相关协议、业务规则等内容。上述内容一经正式发布，即为本协议不可分割的组成部分，您同样应当遵守。</p>
    </section>

    <section class="agreement-chapter agreement-chapter--small">
      <h3>二、【关于本服务】</h3>
      <h4>2.1【本服务的内容】</h4>
      <p>本服务内容是指校友平台向用户提供的跨平台的通讯工具（以下简称“校友平台”），支持单人、多人参与，在发送文字，同时为用户提供包括但不限于关系链拓展、便捷工具等功能或内容的软件许可及服务（以下简称“本服务”）。</p>
      <h4>2.2【本服务的形式】</h4>
      <p>2.2.1 校友平台给予您一项个人的、不可转让及非排他性的许可。您仅可为访问或使用本服务的目的而使用这些软件及服务。</p>
      <h4>2.3【本服务许可的范围】</h4>
      <p>2.3.1 校友平台给予您一项个人的、不可转让及非排他性的许可，以使用本软件。您可以为非商业目的在单一台终端设备上使用、显示、运行本软件。</p>
      <p>2.3.2 本条及本协议其他条款未明示授权的其他一切权利仍由校友平台保留，</p>
    </section>
  </div>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
  name: 'AgreementPage',
  mixins: [template_page_mixin],
  components: {},
  data() {
    return {};
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    }
  },
};
</script>

<style scoped lang="scss">
.agreement-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
  position: relative;
}

/* 统一返回按钮样式（与 my-donations 保持一致） */
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}

.agreement-header {
  text-align: center;
  margin-bottom: 30px; /* 缩小头部与正文间距 */
}

.agreement-header h1 {
  font-size: 22px; /* 略微缩小标题 */
  font-weight: bold;
  margin-bottom: 15px;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 70px; /* 缩小校徽 */
  height: 70px;
  margin-bottom: 8px;
}

.logo-section p {
  margin-bottom: 8px;
  color: #666;
  font-size: 14px; /* 缩小校友会名称字体 */
}

.logo-section h2 {
  font-size: 18px; /* 缩小副标题 */
  font-weight: bold;
  margin-top: 8px;
  color: #1E50B3;
}

// 所有核心章节统一缩小样式
.agreement-chapter--small {
  margin-bottom: 20px; /* 缩小章节间距 */

  h3 {
    font-size: 15px;
    font-weight: bold;
    background-color: #f5f5f5;
    padding: 6px 10px; /* 缩小标题内边距 */
    margin-bottom: 10px;
    border-left: 4px solid #1E50B3;
  }

  h4 {
    font-size: 13px;
    font-weight: bold;
    margin: 10px 0 6px; /* 缩小子标题间距 */
    color: #1E50B3;
  }

  p {
    font-size: 12px;
    line-height: 1.5; /* 缩小行高 */
    margin-bottom: 6px; /* 缩小段落间距 */
    text-indent: 2em;
    color: #555;
  }
}
</style>